<template>
  <el-table :data="tableData" style="width: 100%" height="400">
    <el-table-column prop="clientName" min-width="90px" label="当事人">
      <template slot-scope="scope">
        <!-- <i class="el-icon-user"></i> -->
        <span style="margin-left: 5px">{{ scope.row.clientName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="clientGroup"
      min-width="80px"
      label="班组"
      v-if="!lite"
    ></el-table-column>
    <el-table-column
      prop="clientOffice"
      min-width="100px"
      label="科室"
      v-if="!lite"
    ></el-table-column>
    <el-table-column prop="eventTime" min-width="100px" label="时间">
      <template slot-scope="scope">
        <!-- <i class="el-icon-date"></i> -->
        <span style="margin-left: 5px">{{
          new Date(scope.row.time.replace(/-/g, "/")).toLocaleDateString()
        }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="category"
      min-width="100px"
      label="检查项"
    ></el-table-column>
    <el-table-column min-width="80px" label="评分">
      <template slot-scope="scope">
        <el-popover
          placement="bottom"
          :title="'评分：' + valueStrings[scope.row.value]"
          width="200"
          trigger="hover"
        >
          <span slot="reference">
            <i
              class="el-icon-success"
              v-if="scope.row.value > 2"
            ></i>
            <i
              class="el-icon-error"
              v-if="scope.row.value <= 2"
            ></i>
            <span style="margin-left: 5px">{{
              valueStrings[scope.row.value]
            }}</span>
          </span>
          <span>评分项目：</span>
          <span v-if="scope.row.remark && scope.row.remark.length > 0">
            <ul>
              <li v-for="item in JSON.parse(scope.row.remark)" :key="item">
                {{ item }}
              </li>
            </ul>
          </span>
          <span>评分原因：</span>
          <br />
          <span v-if="scope.row.remark && scope.row.comment.length > 0">{{
            scope.row.comment
          }}</span>
          <span v-else>无</span>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      prop="userName"
      label="提交人"
      width="80px"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ["client", "range"],
  computed: {
    inspect() {
      return this.$store.state.summary.inspectSource;
    },
    tableData() {
      return this.fetchData();
    },
  },
  data() {
    return {
      lite: true,
      valueStrings: ["未涉及", "缺陷", "不足", "合格", "良好", "优秀"],
    };
  },
  methods: {
    fetchData() {
      let data = [];
      if (this.client.length === 0) return data;
      for (let i = 0; i < this.inspect.length; i++) {
        if (this.inspect[i].clientName === this.client) {
          let begin = new Date(
            this.inspect[i].begin.replace(/-/g, "/")
          ).getTime();
          let time = new Date(
            this.inspect[i].time.replace(/-/g, "/")
          ).getTime();
          if (
            time >= this.range.min.getTime() ||
            begin <= this.range.max.getTime()
          ) {
            data.push(this.inspect[i]);
          }
        }
      }
      return data;
    },
  },
};
</script>
